<template>
  <div style="padding: 20px">
    <Alert message="标签示例" type="info" show-icon>
      <template #icon><smile-outlined /></template>
      <template #description>
        <div>组件属性：</div>
        <div>current: 当前进度 number</div>
        <div>status: success , error</div>
        <div>items: [ { title: 标题, description: 描述 }]</div>
      </template>
    </Alert>
    <div class="demoTittle">基础用法(steps)</div>
    <div class="demoTittle2"
      >- 当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。</div
    >
    <div class="demoTittle2">- 不支持点击跳转</div>
    <a-steps
      :current="1"
      :items="[
        {
          title: '基本信息',
          description,
        },
        {
          title: '选择人群',
          description,
        },
        {
          title: '设置执行计划',
          description,
        },
      ]"
    ></a-steps>
    <div style="height: 20px"></div>

    <div class="demoTittle">不同状态</div>
    <div class="demoTittle2">- 成功success 失败error</div>
    <div style="display: flex">
      <a-steps
        direction="vertical"
        style="height: 400px"
        :current="1"
        :items="[
          {
            title: '基本信息',
            description: '这是基本信息描述',
          },
          {
            title: '选择人群',
            description: '这是选择人群基本描述基本描述基本描述',
          },
          {
            title: '设置执行计划',
            description: '这是设置执行计划描述',
          },
        ]"
      ></a-steps>
      <a-steps
        direction="vertical"
        style="height: 400px"
        :current="1"
        status="error"
        :items="[
          {
            title: '基本信息',
            description: '这是基本信息描述',
          },
          {
            title: '选择人群',
            description: '这是选择人群基本描述基本描述基本描述',
          },
          {
            title: '设置执行计划',
            description: '这是设置执行计划描述',
          },
        ]"
      ></a-steps>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { Alert } from 'ant-design-vue';
  import { SmileOutlined, UserOutlined } from '@ant-design/icons-vue';
  const description = 'This is a description.';
</script>
<style lang="less" scoped>
  .demoTittle {
    font-size: 20px;
    font-weight: 400;
    color: #444444;
    margin: 20px 0;
  }
  .demoTittle2 {
    color: #494a4a;
    font-size: 14px;
    margin-bottom: 18px;
  }
</style>
